<template>
  <view
    v-if="userInfo.isOfficialAccount !== IsOfficialAccountEnum.FOLLOWED"
    class="disFlxJS codeImgBox"
  >
    <view>
      <view class="fz-16 fw-7 disFlxJS" style="color: #EA5E0E;">
        <text>长按二维码关注公众号</text>
        <text class="ali-icon fz-40 ml-5">&#xeb94;</text>
      </view>
      <view class="fz-14 pt-5 color9">接收活动、缴费、审核等通知</view>
    </view>
    <view>
      <TImage :src="codeImg" width="160rpx" height="160rpx" :show-menu-by-longpress="true" />
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { useAppStoreWithOut } from '@/store/modules/app';
  import { useUserStoreWithOut } from '@/store/modules/user';
  import { storeToRefs } from 'pinia';
  import { computed } from 'vue';
  import { IsOfficialAccountEnum } from '@/enums/loginEnum';
  import TImage from '@/components/TImage/index.vue';

  const useUser = useUserStoreWithOut();
  const { userInfo } = storeToRefs(useUser);
  const { globalConfig } = useAppStoreWithOut();
  const codeImg = computed(() => globalConfig?.officialAccounts);
</script>

<style lang="scss" scoped>
  .codeImgBox {
    // position: fixed;
    bottom: 48rpx;
    left: 25rpx;
    width: 700rpx;
    height: 220rpx;
    border-radius: 16rpx;
    box-shadow: 0px 2px 12px rgba(150, 151, 153, 0.16);
    padding: 32rpx;
    box-sizing: border-box;
    background-color: #fff;
    margin: 0 auto;
    margin-top: 32rpx;
    .color9 {
      color: #999996;
    }
  }
</style>
